/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Button,Modal,Image,FlatList,TouchableOpacity,ScrollView} from 'react-native';
import ScrollableTabView, { ScrollableTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view';
import Sqlite from 'react-native-sqlite-storage'
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { scaleSize } from '../../utils/screen';
import FontText,{fontFamily} from '../components/FontText';
import { Toast,ActivityIndicator } from "antd-mobile-rn";
import {i18n} from '../../i18n/index';
import * as appActions from '../../actions/appAction'
let db;
var Dimensions = require('Dimensions');
var ScreenWidth = Dimensions.get('window').width;
var ScreenHeight =Dimensions.get('window').height;
class MenuC extends Component {
    constructor(props) {
    super(props);
    this.state = {
        loading:true,
        animationType: 'none',//none slide fade
        modalVisible: false,//模态场景是否可见
        numberVisible:false,//模态场景是否可见
        checkoutmodel:false,
        transparent: true,//是否透明显示
        label: ['Main', 'Sides', 'Ecigs', 'Salads', 'Main', 'Sides', 'Ecigs', 'Salads'],
        goodsList:[{id:1,imgurl:require('../../access/imgs/goods.png'),name:'Australian Wagyu Striploin8',subname:'Full blood Wagyu product produced in the pristine environment.'},
        {id:2,imgurl:require('../../access/imgs/goods.png'),name:'Australian Wagyu Striploin8',subname:'Full blood Wagyu product produced in the pristine environment.'},
        {id:3,imgurl:require('../../access/imgs/goods.png'),name:'Australian Wagyu Striploin8',subname:'Full blood Wagyu product produced in the pristine environment.'},
        {id:4,imgurl:require('../../access/imgs/goods.png'),name:'Australian Wagyu Striploin8',subname:'Full blood Wagyu product produced in the pristine environment.'},
        {id:5,imgurl:'',name:'Australian Wagyu Striploin8',subname:'Full blood Wagyu product produced in the pristine environment.'},
        {id:6,imgurl:require('../../access/imgs/goods.png'),name:'Australian Wagyu Striploin8',subname:'Full blood Wagyu product produced in the pristine environment.'},
        {id:7,imgurl:require('../../access/imgs/goods.png'),name:'Australian Wagyu Striploin8',subname:'Full blood Wagyu product produced in the pristine environment.'},
        {id:5,imgurl:'',name:'Australian Wagyu Striploin8',subname:'Full blood Wagyu product produced in the pristine environment.'},
        {id:5,imgurl:'',name:'Australian Wagyu Striploin8',subname:'Full blood Wagyu product produced in the pristine environment.'}],
        seltelitem:{imgurl:require('../../access/imgs/goods.png')},
        deltelimg:require('../../access/imgs/deltel.png'),
        storeinfo:{
          name:'Store Name',
          phone:'(646) 590-3783',
          address:'625 8th Avenue at 42nd St New York, NY 10018'
        },
        skuProperty:[{"productid":1329,"attrid":139,"name":"套","propertyList":[{"id":"305","name":"1套"}],"propertysJson":[{"id":"305","name":"1套"}]},{"productid":1329,"attrid":142,"name":"颜色","propertyList":[{"id":"720","name":"浅灰色"},{"id":"743","name":"浅粉"},{"id":"320","name":"浅蓝色"},{"id":"387","name":"白色"},{"id":"319","name":"紫色"},{"id":"318","name":"黑色"}],"propertysJson":[{"id":"720","name":"浅灰色"},{"id":"743","name":"浅粉"},{"id":"320","name":"浅蓝色"},{"id":"387","name":"白色"},{"id":"319","name":"紫色"},{"id":"318","name":"黑色"}]}]
    };
     this.getLable();
    }
    getLable(){

      // this.setState({
      //   label: ['Main', 'Sides', 'Ecigs', 'Salads', 'Main', 'Sides', 'Ecigs', 'Salads']
      // })
      // ,()=>{
      //   if(this.state.label.length>0){
      //     this.setState({
      //       seltelitem:label[0]
      //    },()=>{
      //     this.getGoodsList();
      //    })
      //   }
      // }
    }
    getGoodsList(){
      // this.setState({
      //   goodsList:[]
      // })
      // this.$http.post("goodsList",{id:1,num:1,page:12})
      // .then((data)=>{
      //   console.log(data);
      // })
      // .catch(e=>{
      //   console.log(e);
      // })
  }
  componentWillMount(){
    console.log(this.props)
    this.setState({
      loading:false
    })
  }
  setModalVisible = (visible,name) => {
    this.setState({ [name]: visible });
  }
  AddCart(){

  }
  Changeindex=(obj)=>{
   console.log(obj.i)
  }
  startShow=()=>{
    
  }
  Tapgoods(item){
    this.setState({ modalVisible: true });
  }
  render() {
    let modalBackgroundStyle = {backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : ''};
    let innerContainerTransparentStyle = this.state.transparent ? { backgroundColor: '#fff' }: null;
    let {app} = this.props;
    let {goodsList,label,storeinfo,skuProperty,checkoutmodel,deltelimg,loading} = this.state;
    let checkoutmodalStyle = {backgroundColor: checkoutmodel ? 'rgba(0, 0, 0, 0)' : ''};
    return (
      <View style={[styles.container,styles.bgff,styles.flexcenter]}>
        <View style={[styles.herders,styles.flexr,styles.flexb,styles.flexx]}>
           <View style={[styles.flexr,styles.flexx]}>
            <View style={[styles.circle,styles.bg72]}></View>  
            <Text style={[styles.color72,styles.ftmedium,{lineHeight:scaleSize(80)}]}>{storeinfo.name}</Text>
           </View>
           <View style={[styles.flexr,styles.flexx]}  >
             <Image style={styles.addressimg} source={require('../../access/imgs/address.png')}/>
             <Text style={[styles.color72,styles.ftbook,{lineHeight:scaleSize(80)}]}>{storeinfo.address}</Text>
             <Image style={styles.phoneimg} source={require('../../access/imgs/phone.png')}/>
             <Text style={[styles.color72,styles.ftbook,{lineHeight:scaleSize(80)}]}>{storeinfo.phone}</Text>
          </View>     
        </View>

        <TouchableOpacity
          activeOpacity = {0.8}
          onPress = {() => { this.setModalVisible(true,'checkoutmodel') }  } 
          style = {[styles.checkoutbtn,styles.flexcenter,checkoutmodel ? styles.bgbf:styles.bg5d]}>
                {
                  checkoutmodel ? 
                  <Text style={[styles.ftmedium,styles.colorff,styles.ft36,{lineHeight:scaleSize(100)}]}>CHECKOUT</Text>:
                  <Text style={[styles.ft36,styles.colorff,styles.ft36,styles.ftmedium,{lineHeight:scaleSize(100)}]}>CHECKOUT $ {'165.00'}</Text>          
                }
                
        </TouchableOpacity>  
        <ScrollableTabView
            style={[styles.viewscroll,styles.flexcenter,styles.bgff]}
            renderTabBar={(e) => this.renderTabBar(e)}
            tabBarBackgroundColor='#f8f8f8'
            tabBarActiveTextColor='#fd265d'
            tabBarInactiveTextColor='#aaa'
            initialPage={0}
            tabBarTextStyle={[styles.ftmedium,styles.ft36]}
            tabBarUnderlineStyle={[styles.lineStyle,styles.bg5d]}
            tabBarActiveTextColor='#FF0000'
            onChangeTab={(obj) => {this.Changeindex(obj)}}>
            {label.map((items, idx) => {return (
            <View  style={styles.flex1} tabLabel={items} key={idx}>
             <FlatList
              numColumns = {4}
              data = {goodsList}
              style = {[styles.flex1,{marginBottom:scaleSize(40)}]} 
              renderItem = {({item,index})=>this.renderItem(item,index)}/>
              <ActivityIndicator 
                  toast
                  animating = {loading}
                  text = {i18n.t("memu.loadings")}
                  />
            </View>
           )})}
        </ScrollableTabView>
        <Modal
          animationType={this.state.animationType}
          transparent={this.state.transparent}    
          visible={this.state.checkoutmodel}
          onShow={this.startShow}>
          <View style={[styles.container,styles.bgff,styles.flexcenter,checkoutmodalStyle]}>
            <View style={[styles.checkoutmodelbox,styles.flex1]}>
               <View style={[styles.flexr,styles.flex1,styles.pd40,styles.bgff,{paddingTop:scaleSize(40)}]}>
                <View style={[styles.flex1,styles.pd50,styles.bgf8,{paddingBottom:0}]}>
                    <View style={[styles.flex1]}> 
                      <ScrollView style={[styles.flex1,{paddingBottom:scaleSize(60),overflow:'scroll'}]}>
                          {skuProperty.map((v,k)=>{
                            return (
                            <View  style={[styles.flexc]}>
                               <View style={[styles.flexr,styles.flexb,styles.flexx]}>
                                <Text style={[styles.color50,styles.ft36,styles.ftbook]}>Australian Wagyu Striploin</Text>
                                <View style={[styles.flexr,styles.flexx,styles.flexb,{width:scaleSize(620)}]}> 
                                    <View style={[styles.onebtnbox,styles.flexcenter,styles.numbercolor,styles.bgee]}>
                                        <TouchableOpacity
                                          activeOpacity = {0.8}
                                          style={styles.ft36}
                                          onPress = {() => {}  }>
                                          <View  style={[styles.flex1,styles.flexcenter,{width:scaleSize(30)}]}>
                                           <Image style={{width:scaleSize(22),height:scaleSize(2)}} source={require('../../access/imgs/reduction.png')}/>
                                          </View>
                                        </TouchableOpacity>
                                            <Text style={[styles.ft30,styles.flexy,styles.ftmedium,{color:'#000',width:scaleSize(100),textAlign:'center',lineHeight:scaleSize(80)}]}  onPress={this.AddCart.bind(this) }>1</Text>
                                        <TouchableOpacity
                                          activeOpacity = {0.8}
                                          style={styles.ft36}
                                          onPress = {() => {}  }>
                                          
                                        <View  style={[styles.flex1,styles.flexcenter,{width:scaleSize(30)}]}>
                                          <Image style={{width:scaleSize(22),height:scaleSize(22)}} source={require('../../access/imgs/add.png')}/>
                                        </View>
                                        </TouchableOpacity>
                                    </View>
                                    <Text style={[styles.ft36,styles.ftbook]}>$84.99</Text>
                                    <Image style={{width:scaleSize(38),height:scaleSize(41)}} source={deltelimg}/>
                                </View>
                              </View>
                              <View style={styles.flexc,[{paddingLeft:scaleSize(35)}]}>
                                {v.propertysJson.map((s,j)=>{
                                    return(
                                      <Text style={[styles.color66,styles.ft30,styles.ftbook,{paddingTop:scaleSize(10),height:scaleSize(50)}]}>{s.name}  { j%2==0 ? <Text style={[styles.color5d,styles.ftbook]}>+$1.99</Text>:''}   </Text>
                                    )})}
                                </View>
                              </View>
                            )})}
                      </ScrollView>
                    </View>

                    <View style={[styles.checkmodelfooter,styles.flexr,styles.flexb]}>
                     <View></View>
                     <View style={[styles.flexb,styles.flexr,{width:scaleSize(624),paddingTop:scaleSize(20)}]}>
                        <View style={[styles.flexy,{width:scaleSize(160)}]}>

                        <Text style={[styles.color99,styles.h60,styles.ft36]}>Subtotal:</Text> 
                        <Text style={[styles.color99,styles.h60,styles.ft36]}>Tax: </Text> 
                        <Text style={[styles.color21,styles.h60,styles.ft36]}>Total:</Text> 

                        </View>
                        <View style={{justifyContent:"flex-end"}}> 
                          <Text style={[styles.color99,styles.h60,styles.ft36]}>$151.98 </Text> 
                          <Text style={[styles.color99,styles.h60,styles.ft36]}>$13.70</Text> 
                          <Text style={[styles.color21,styles.h60,styles.ft36]}>$165.68</Text>  
                        </View>
                     </View>
                    </View>
                </View>
                <View style={[{width:scaleSize(644)},styles.flexx,styles.pt50,]} >
                    <View style={[styles.flexr,styles.flexcenter,{paddingBottom:scaleSize(115)}]}>
                        <View style={[styles.onebtnbox,styles.flexcenter,styles.bgff,{marginRight:scaleSize(40),borderColor:'#fd265d'}]} >
                          <Text style={[styles.color5d,styles.ft30]} >Dine In</Text>
                        </View>
                        <View style={[styles.onebtnbox,styles.flexcenter,styles.bgff,{borderColor:'#9b9b9b'}]} >
                          <Text style={[styles.color9d,styles.ft30]} >Take Out</Text>
                        </View>
                    </View>
                    <Text style={[styles.ft48,styles.color50,{height:scaleSize(100)}]}>How to pay?</Text>

                    <View style={[styles.onebtnbox,styles.flexcenter,styles.cardbtn]}>
                      <TouchableOpacity
                        activeOpacity = {0.8}
                        onPress = {()=>{}}>
                        <Text style={[styles.ft48,styles.colorff]}> Credit Card</Text>
                      </TouchableOpacity>
                    </View>
                    <View style={[styles.flexcenter,{height:scaleSize(90)}]}>
                      <Text style={[styles.ft36,styles.color50]}>or</Text>
                    </View>
                    
                    <View style={[styles.onebtnbox,styles.flexcenter,styles.cardbtn]}>
                      <TouchableOpacity
                          activeOpacity = {0.8}
                          onPress = {()=>{}}>
                          <Text style={[styles.ft48,styles.colorff]}> Cash</Text>
                        </TouchableOpacity>
                      </View>
                </View>

               </View>
              

            </View>
          </View>
        </Modal>
        <Modal
          animationType={this.state.animationType}
          transparent={this.state.transparent}
          visible={this.state.numberVisible}
          onRequestClose={() => { this.setModalVisible(false,'numberVisible') } }
          onShow={this.startShow}
          >
          <View style={[styles.container,styles.bgff,styles.flexcenter, modalBackgroundStyle]}>
            <View style={[styles.innerContainer, styles.changnum,innerContainerTransparentStyle]}>
              <View style={styles.contbox}>
                  <View style={[styles.goodsinfo,styles.goodsinfomr]}>
                    <Image  style={styles.seltelimg} source={this.state.seltelitem.imgurl} />
                    <View style={{flex:1}}>
                        <Text style={[styles.ft48,styles.color50,{marginBottom:scaleSize(25)}]}>Australian Wagyu Striploin</Text>        
                        <Text style={[styles.ft40,{marginBottom:scaleSize(60)}]}>$83.00</Text> 
                        <Text style={[styles.ft24,styles.color66]}>Wagyu is described as the highest quality beef in the world, and is renowned for its distinctive marbling and flavour. Wagyu beef also contains a higher percentage of Omega 3 and Omega 6, and its incr eased marbling enhances the ratio of healthier mono-saturated fats compared to regular beef.</Text> 
                    </View>
                  </View>      

                  <View style={styles.subbtn}>
                    <TouchableOpacity
                        activeOpacity = {0.8}
                        style={{width:scaleSize(40)}}
                        onPress={this.setModalVisible.bind(this,false,'numberVisible')}>
                      <View style={[styles.onebtnbox,styles.flexcenter,styles.bgee]}  >
                        <Text  styles={[styles.color9d,styles.ftmedium]} >Cancel</Text>
                      </View>
                    </TouchableOpacity>
                    <View style={styles.subbtnbox,styles.flexcenter,styles.flexr} >
                      <View style={[styles.onebtnbox,styles.flexcenter,styles.numbercolor,styles.bgee]}>
                          <TouchableOpacity
                            activeOpacity = {0.8}
                            style={{width:scaleSize(40)}}
                            onPress = {() => {}  }>
                           <View  style={[styles.flex1,styles.flexcenter,{width:scaleSize(30)}]}>
                              <Image style={{width:scaleSize(22),height:scaleSize(2)}} source={require('../../access/imgs/reduction.png')}/>
                            </View>
                          </TouchableOpacity>
                              <Text style={[styles.ft30,styles.flexy,styles.ftmedium,{color:'#000',width:scaleSize(100),textAlign:'center',lineHeight:scaleSize(80)}]}  onPress={this.AddCart.bind(this) }>1</Text>
                          <TouchableOpacity
                            activeOpacity = {0.8}
                            style={{width:scaleSize(40)}}
                            onPress = {() => {}  }>
                            <View  style={[styles.flex1,styles.flexcenter,{width:scaleSize(30)}]}>
                              <Image style={{width:scaleSize(22),height:scaleSize(22)}} source={require('../../access/imgs/add.png')}/>
                            </View>
                          </TouchableOpacity>
                      </View>
                      <View style={[styles.onebtnbox,styles.flexcenter,styles.bg5d]}>
                        <Text style={[styles.colorff,styles.ftmedium]} onPress={this.AddCart.bind(this,false) }>Add to Cart</Text>
                      </View>
                    </View>
                  </View>
                
                
                </View>
            </View>
          </View>
        </Modal>
        <Modal
          animationType={this.state.animationType}
          transparent={this.state.transparent}
          visible={this.state.modalVisible}
          onRequestClose={() => { this.setModalVisible(false,'modalVisible') } }
          onShow={this.startShow}
          >
          <View style={[styles.container,styles.bgff,styles.flexcenter,modalBackgroundStyle]}>
            <View style={[styles.innerContainer,innerContainerTransparentStyle]}>
              <View style={styles.contbox}>
                  <View style={styles.goodsinfo}>
                      <Image  style={styles.seltelimg} source={this.state.seltelitem.imgurl} />
                      <View style={{flex:1}}>
                      <Text style={[styles.ft48,styles.color50,styles.ftbook,{marginBottom:scaleSize(25)}]}>Australian Wagyu Striploin</Text>        
                        <Text style={[styles.ft40,styles.ftmedium,{marginBottom:scaleSize(60)}]}>$83.00</Text> 
                        <Text style={[styles.ft24,styles.color66,styles.ftlight]}>Wagyu is described as the highest quality beef in the world, and is renowned for its distinctive marbling and flavour. Wagyu beef also contains a higher percentage of Omega 3 and Omega 6, and its incr eased marbling enhances the ratio of healthier mono-saturated fats compared to regular beef.</Text> 
                      </View>
                  </View>

                  <ScrollView style={{flex:1,paddingBottom:scaleSize(60),overflow:'scroll'}}>
                        {skuProperty.map((v,k)=>{
                          return (
                            <View key={k}>
                             <View style={[styles.flexy,styles.h60,{borderBottomColor:'#eee',borderBottomWidth:scaleSize(1),borderStyle:'solid'}]} >
                                <Text style={[styles.ft30,styles.color9d,styles.ftlight,{fontWeight:'200'}]}>{v.name}</Text>
                             </View>
                             <View style={{flexDirection:'row',flexWrap:'wrap'}}>
                              {v.propertysJson.map((s,j)=>{
                                  return(
                                    <View>
                                      <View style={[styles.onebtnbox,styles.flexcenter,styles.nosektel,styles.bgee]} >
                                        <Text style={[styles.color50,styles.ft30,styles.ftbook]} key={j}>{s.name}</Text>
                                      </View>
                                      <View style={[{height:scaleSize(40)},styles.flexcenter]}>
                                        <Text style={styles.ftbook}>{'$1.99'}</Text> 
                                      </View>
                                    </View>
                                   
                                  )})}
                               </View>
                            </View>
                          )})}
                  </ScrollView>
              </View>
              

              <View style={[styles.subbtn,styles.flexr,styles.flexb]}>
                <TouchableOpacity
                    activeOpacity = {0.8}
                    style={[styles.onebtnbox,styles.flexcenter,styles.bgee]}
                    onPress={this.setModalVisible.bind(this,false,'modalVisible') }>
                  <Text styles={[styles.color9d,styles.ftmedium]} >Cancel</Text>
                </TouchableOpacity>
                <View style={[styles.subbtnbox,styles.flexcenter,styles.flexr]} >
                <View style={[styles.onebtnbox,styles.flexcenter,styles.numbercolor,styles.bgee]}>
                    <TouchableOpacity
                        activeOpacity = {0.8}
                        style={{width:scaleSize(40)}}
                        onPress = {() => {}  }>
                        <View  style={[styles.flex1,styles.flexcenter,{width:scaleSize(30)}]}>
                          <Image style={{width:scaleSize(22),height:scaleSize(2)}} source={require('../../access/imgs/reduction.png')}/>
                        </View>
                      </TouchableOpacity>
                          <Text style={[styles.ft30,styles.flexy,styles.ftmedium,{color:'#000',width:scaleSize(100),textAlign:'center',lineHeight:scaleSize(80)}]}  onPress={this.AddCart.bind(this) }>1</Text>
                      <TouchableOpacity
                        activeOpacity = {0.8}
                        style={{width:scaleSize(40)}}
                        onPress = {() => {}  }>
                        <View  style={[styles.flex1,styles.flexcenter,{width:scaleSize(30)}]}>
                          <Image style={{width:scaleSize(22),height:scaleSize(22)}} source={require('../../access/imgs/add.png')}/>
                        </View>
                      </TouchableOpacity>
                  </View>
                  <View style={[styles.onebtnbox,styles.flexcenter,styles.bg5d]}>
                   <Text style={[styles.ftmedium,{color:'#fff'}]} onPress={this.AddCart.bind(this,false) }>Add to Cart</Text>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </Modal>


      </View>
    );
  }
  test(){
    console.log(this.props)
    this.props.changeNum();
  }
  renderTabBar(e){//tab项
    return (
      <ScrollableTabBar 
        tabStyle={[styles.barstlyle,styles.flexcenter,styles.ftbook]}
        style={[{borderWidth: 0,height:scaleSize(100),justifyContent: 'center',marginRight:scaleSize(500)}]}
        tabsContainerStyle = {{paddingRight: scaleSize(50)}}
      />);
  }
  renderItem(item,index){
    return (
        <View style={[{marginTop:scaleSize(40)},styles.bgff,styles.goodsitem]}> 
         <TouchableOpacity
          activeOpacity = {0.8}
          onPress = {this.Tapgoods.bind(this,item)}>
          <View style={[styles.price,styles.flexcenter]}>
            <Text style={[styles.pricetext,styles.ftmedium,{lineHeight:scaleSize(60)}]}>$83.00</Text>
          </View>
          <View style={[styles.goodsheder,styles.flexcenter,styles.bgee,styles.ft36]}>
            {
              item.imgurl ? <Image style={styles.goodsimg} source={item.imgurl} />:<Text style={[styles.flexy,styles.coloraa]} >No Image</Text>
            }
          </View>
          <View  style={styles.goodsname}>
            <Text style={[styles.ftbook]}>{item.name}</Text>
          </View>
          <View  style={styles.goodsname}>
            <Text style={[styles.subname,styles.ftlight]}>{item.subname}</Text>
          </View>
          </TouchableOpacity>
        </View> 
       
    )
}
}
export default connect(
  state => ({
      app: state.app
  }),
  dispatch => bindActionCreators(appActions, dispatch)
)(MenuC);
const styles = StyleSheet.create({
  flexr:{
    flexDirection:"row",
  },
  flexc:{
    flexDirection:"column",
  },
  flexx:{
    alignItems:'center',
  },
  flexy:{
    justifyContent:'center'
  },
  flexb:{
    justifyContent:'space-between'
  },
  flexcenter:{
    justifyContent:'center',
    alignItems:"center",
  },
  pd50:{
    padding:scaleSize(50),
  },
  pd40:{
    padding:scaleSize(40),
  },
  pt50:{
    paddingTop:scaleSize(50),
  },
  pl50:{
    paddingLeft:scaleSize(50), 
  },
  pr50:{
    paddingRight:scaleSize(50), 
  },
  pb50:{
    paddingBottom:scaleSize(50),
  },
  pt40:{
    paddingTop:scaleSize(40),
  },
  pl40:{
    paddingLeft:scaleSize(40), 
  },
  pr40:{
    paddingRight:scaleSize(40), 
  },
  pb40:{
    paddingBottom:scaleSize(40), 
  },
  ft30:{
    fontSize:scaleSize(30),
  },
  ft36:{
    fontSize:scaleSize(36),
  },
  ft40:{
    fontSize:scaleSize(40),
  },
  ft48:{
    fontSize:scaleSize(48),
  },
  ftbold:{
    fontFamily:fontFamily.bold
  },
  ftlight:{
    fontFamily:fontFamily.light
  },
  ftmedium:{
    fontFamily:fontFamily.medium
  },
  ftbook:{
    fontFamily:fontFamily.book
  },
  ft24:{
    fontSize:scaleSize(24),
  },
  flex1:{
    flex: 1,
  },
  colorff:{
    color:'#fff'
  },
  color00:{
    color:'#000'
  },
  color5d:{
    color:'#fd265d'
  },
  color50:{
    color:'#505050'
  },
  color56:{
    color:'#545456'
  },
  color66:{
    color:'#666666'
  },
  color9d:{
    color:'#9b9b9b'
  },
  color72:{
    color:'#cfa972'
  },
  color21:{
    color:'#212121'
  },
  h60:{
    height:scaleSize(60)
  },
  coloraa:{
    color:'#aaa',
  },
  color99:{
    color:'#999'
  },
  bgff:{
    backgroundColor:'#fff'
  },
  bgf8:{
    backgroundColor:'#f8f8f8'
  },
  bg5d:{
    backgroundColor:'#fd265d'
  },
  bg72:{
    backgroundColor:'#cfa972'
  },
  bgbf:{
    backgroundColor:'#bfbfbf'
  },
  bgee:{
    backgroundColor:'#eeeeee'
  },
  borders:{
    borderStyle:"solid",
  },
  bordert:{
    borderTopWidth:scaleSize(1),
  },
  borderb:{
    borderTopWidth:scaleSize(1),
  },
  positionr:{
    position:"relative",
  },
  positions:{
    position:"absolute",
  },
  container:{
    flex: 1,
    paddingTop:scaleSize(40),
    position:"relative",
  },
  innerContainer:{
    paddingTop:scaleSize(50),
    paddingLeft:scaleSize(50),
    paddingRight:scaleSize(50),
  },
  checkoutmodelbox:{
    width:ScreenWidth, 
    paddingTop:scaleSize(180),
  },
  checkmodelfooter:{
    height:scaleSize(225),
    borderTopWidth:scaleSize(1),
    borderStyle:"solid",
    borderTopColor:'#d2d2d2',
  },
  herders:{
    width:ScreenWidth-10-scaleSize(50),
    height:scaleSize(80),
    marginLeft:scaleSize(40),
    paddingRight:scaleSize(50),
  },
  circle:{
    width:scaleSize(31),
    height:scaleSize(31),
    borderRadius:scaleSize(31/2),
    marginRight:scaleSize(10),
  },
  addressimg:{
    height:scaleSize(32),
    width:scaleSize(24),
    marginRight:10,
  },
  phoneimg:{
    height:scaleSize(31),
    width:scaleSize(31),
    marginLeft:scaleSize(70),
    marginRight:10,
  },
  checkoutbtn:{
    width:scaleSize(500),
    height:scaleSize(100),
    position:"absolute",
    right:0,
    zIndex:999,
    top:scaleSize(120),
  },
  viewscroll:{
    height:scaleSize(100),
  },
  barstlyle:{
    width:ScreenWidth/6.4,
    position:"relative",
    height:scaleSize(100)
  },
  lineStyle: {
    position:"absolute",
    top:0,
    width:ScreenWidth/6.4,
    height: 2,
  },
  goodsitem:{
    paddingTop:scaleSize(70),
    marginLeft:scaleSize(41),
    width:scaleSize(460),
    flexDirection:'column',
    position:"relative",
  },
  price:{
    backgroundColor:'#fd265d',
    position:"absolute",
    height: scaleSize(60),
    width: scaleSize(150),
    zIndex:9999,
    right:scaleSize(-10),
    top:scaleSize(90),
  },
  pricetext:{
    fontSize:scaleSize(30),
    color:'#fff'
  },
  goodsheder:{
    height:scaleSize(460),
    width:scaleSize(460),
  },
  goodsimg:{
    height:scaleSize(460),
    width:scaleSize(460),
  },
  goodsname:{
    paddingTop:scaleSize(35),
    textAlign:'center',
    fontSize:scaleSize(36),
    color:'#505050',  
  },
  subname:{
    paddingTop:scaleSize(35),
    fontSize:scaleSize(24),
    color:'#666666',
  },
  changnum:{
    height:scaleSize(520)
  },
  contbox:{
    flex:1,
    width:scaleSize(1500)
  },
  goodsinfo:{
    width:scaleSize(1500),
    height:scaleSize(300),
    marginBottom:scaleSize(60),
    flexDirection:'row'
  },
  goodsinfomr:{
    marginBottom:scaleSize(30),
  },
  seltelimg:{
    height:scaleSize(300),
    width:scaleSize(300),
    marginRight:scaleSize(50),
  },
  subbtn:{
    height:scaleSize(150),
    paddingTop:scaleSize(35),
  },
  onebtnbox:{
    height:scaleSize(80),
    paddingLeft:scaleSize(50),
    paddingRight:scaleSize(50),
    borderStyle:"solid",
    borderColor:'rgba(0,0,0,0)',
    borderWidth:scaleSize(1),
    borderRadius:scaleSize(40),
  },
  cardbtn:{
    height:scaleSize(102),
    borderRadius:scaleSize(51),
    backgroundColor:'#fd265d'
  },
  numbercolor:{
    flexDirection:'row',
    borderWidth:scaleSize(1),
    borderStyle:"solid",
    marginRight:scaleSize(60)
  },
  subbtnbox:{
    height:scaleSize(80),
  },
  nosektel:{
    width:scaleSize(212),
    marginRight:scaleSize(30),
    marginTop:scaleSize(20),
  }
});
 